
<template>
  <div class="app-container">
    <div class="top">
      <div class="optin">
        <a href="javascript:;"
           class="test"><i class="el-icon-upload"></i>上传
          <input type="file"
                 @change="shangchuanFn" />
        </a>
        <el-button size="small"
                   @click="creatFn">
          <i class="el-icon-folder-opened"></i>新建文件夹
        </el-button>
        <div class="search">
          <el-input size="small"
                    placeholder="搜索文件"
                    v-model="search_file">
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="searchFile()"></el-button>
          </el-input>
        </div>
      </div>
      <div class="progress">
        <el-progress v-show="progress"
                     :percentage="percentage"
                     color="#13ce66"></el-progress>
      </div>
      <el-breadcrumb separator="/"
                     style="margin-top: 20px">
        <el-breadcrumb-item>
          <a @click.prevent="toCommonFn">根目录</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in urlpath"
                            :key="item.title">
          <a @click.prevent="backwjFn(item.path, index)">{{ item.title }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box"
         @click.stop="hidemenu"
         v-loading="loading">
      <div :class="file_state_class[item.state]"
           v-for="item in pagelist"
           :key="item.name"
           @dblclick="openFn(item)"
           @contextmenu.prevent="rightClick($event, item)">
        <div class="img">
          <img :src="require('@/assets/' + item.imgtype + '.png')" />
          <span v-if="item.state !== 1">{{ file_state[item.state] }}</span>
        </div>

        <span>{{ item.title }}</span>
      </div>
      <div id="menu"
           class="options"
           v-show="options">
        <div @click="download"><i class="el-icon-download mg"></i>下载</div>
        <div @click="preview"><i class="el-icon-view mg"></i>预览</div>
        <div @click="fenxiangFn"><i class="el-icon-share mg"></i>分享</div>
        <div @click="info"><i class="el-icon-warning-outline mg"></i>属性</div>
        <div @click="move"><i class="el-icon-copy-document mg"></i>移动</div>
        <div @click="delFn"><i class="el-icon-delete mg"></i>删除</div>
      </div>
    </div>
    <el-dialog title="属性"
               :visible.sync="dialogVisible"
               width="20%">
      <div class="info">
        <div><span>文件名称:</span>{{ active.wjname }}</div>
        <div><span>类型:</span>{{ active.type }}</div>
        <div><span>文件路径:</span>{{ active.name }}</div>
        <div><span>文件大小:</span>{{ active.size }}</div>
        <div><span>创建日期:</span>{{ active.lastModified | filterDate }}</div>
        <!-- <div><span>上传者:</span>eren200</div> -->
      </div>
    </el-dialog>
    <el-dialog title="创建文件夹"
               :visible.sync="dialogVisibleCreat"
               width="20%">
      文件夹名称： <el-input v-model="wjname"></el-input>
      <el-button style="margin-top: 10px"
                 type="primary"
                 @click="creatwjFn">确 定</el-button>
    </el-dialog>
    <el-dialog title="分享链接"
               :visible.sync="dialogVisible11"
               width="30%">
      <span>{{ fxurl }}</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible11 = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="文件预览"
               :visible="showDoc == true || showPdf == true || showImg == true"
               :width="fileWidth"
               :before-close="closePreviewClick"
               class="dialog-div-pre-style"
               center
               append-to-body>
      <div v-if="showDoc == true">
        <iframe frameborder="0"
                :src="
            'https://view.officeapps.live.com/op/view.aspx?src=' + this.fileUrl
          "
                width="100%"
                height="800px">
        </iframe>
      </div>
      <div v-else-if="showPdf == true"
           style="justify-content: center; align-items: center">
        <embed :src="pdfUrl"
               style="width: 100%; height: 80vh" />
      </div>
      <div v-else-if="showImg == true"
           style="
          justify-content: center;
          align-items: center;
          min-width: 40px;
          min-height: 40px;
        ">
        <img :src="imagesUrl"
             alt=""
             style="width: 100%; height: auto" />
      </div>
    </el-dialog>

    <move ref="move"></move>
  </div>
</template>

<script>
// import axios from "axios";
import move from "@/components/File/Move";
export default {
  components: { move },
  data () {
    return {
      file_state: {
        0: "等待审核",
        1: "审核已通过",
        2: "审核未通过",
        3: "未知状态",
      },
      file_state_class: {
        0: "item item1",
        1: "item",
        2: "item item1",
        3: "item item1",
      },
      percentage: 0,
      progress: false,
      xhr: new XMLHttpRequest(),
      options: false,
      active: "",
      dialogVisible: false,
      dialogVisibleCreat: false,
      dialogVisible11: false,
      fxurl: "",
      pagelist: "",
      loading: false,
      urlpath: [],
      wjname: "",
      search_file: null,

      // 文件预览
      showDoc: false,
      showPdf: false,
      showImg: false,
      fileUrl: "",
      imagesUrl: "",
      pdfUrl: "",
      fileWidth: "min-width = 300px",
    };
  },
  created () {
    this.getwjlist("/");
  },
  methods: {
    move () {
      this.$refs.move.open(this.active.name);
    },
    preview () {
      this.$https
        .get("/common/preview", { params: { fileName: this.active.name } })
        .then((res) => {
          let url = res.data;
          if (
            url.indexOf("doc") != -1 ||
            url.indexOf("docx") != -1 ||
            url.indexOf("xsl") != -1 ||
            url.indexOf("xlsx") != -1 ||
            url.indexOf("ppt") != -1
          ) {
            this.fileWidth = "80%";
            this.showDoc = true;
            this.fileUrl = url;
          } else if (url.indexOf("pdf") != -1) {
            this.fileWidth = "80%";
            this.pdfUrl = url;
            this.showPdf = true;
          } else if (
            url.indexOf("jpg") != -1 ||
            url.indexOf("png") != -1 ||
            url.indexOf("jpeg") != -1
          ) {
            this.showImg = true;
            this.imagesUrl = url;
            let image = new Image();
            image.src = url;
            // image.onload = () => {
            //   this.fileWidth = image.width + "px";
            // };
          } else {
            this.$message("当前文件暂不支持预览");
          }
        });
    },
    closePreviewClick () {
      if (this.showDoc == true) {
        this.showDoc = false;
      } else if (this.showPdf == true) {
        this.showPdf = false;
      } else if (this.showImg == true) {
        this.showImg = false;
      }
    },
    searchFile () {
      let dir;
      if (this.urlpath.length == 0) {
        dir = "/";
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      this.$https
        .get("/common/search", { params: { dir, fileName: this.search_file } })
        .then((res) => {
          this.loading = false;
          this.pagelist = res.data;
        });
    },
    getwjlist (dir) {
      this.loading = true;
      this.$https.get("/common/getall", { params: { dir } }).then((res) => {
        this.loading = false;
        this.pagelist = res.data;
      });
    },
    rightClick (e, item) {
      this.active = item;
      this.options = true;
      this.options = true;
      let menu = document.querySelector("#menu");
      menu.style.top = e.screenY - 150 + "px";
      menu.style.left = e.screenX - 200 + "px";
    },
    openFn (item) {
      if (item.imgtype == "wjj") {
        let name = item.name;
        this.getwjlist(name);
        this.urlpath.push({ title: item.title, path: item.name });
      }
    },
    toCommonFn () {
      this.urlpath = [];
      this.getwjlist("/");
    },
    backwjFn (path, index) {
      this.urlpath.splice(index + 1, this.urlpath.length);
      this.getwjlist(path);
    },
    hidemenu () {
      this.options = false;
    },
    download () {
      this.$https
        .get("/common/down", {
          params: { name: this.active.name, title: this.active.title },
        })
        .then((res) => {
          this.openDownload(res.data.url, this.active.title);
        });
    },
    fenxiangFn () {
      this.$https
        .get("/common/down", {
          params: { name: this.active.name, title: this.active.title },
        })
        .then((res) => {
          if (res.code == 200) {
            this.dialogVisible11 = true;
            this.fxurl = `${res.data}&title=${this.active.title}`;
          }
        });
    },
    openDownload (url, name) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", name);
      document.body.appendChild(link);
      link.click();
    },
    creatFn () {
      this.dialogVisibleCreat = true;
    },
    creatwjFn () {
      let dir;
      if (this.urlpath.length == 0) {
        dir = "/";
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      this.$https
        .get("/common/creat", { params: { dir, name: this.wjname } })
        .then((res) => {
          if (res.code == 200) {
            this.getwjlist(dir);
            this.dialogVisibleCreat = false;
          }
        });
    },
    delFn () {
      let dir = "";
      if (this.urlpath.length == 0) {
        dir = "/";
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      this.$https
        .get("/common/delete", { params: { dir: this.active.name } })
        .then((res) => {
          if (res.code == 200) {
            this.getwjlist(dir);
          }
        });
    },
    info () {
      this.dialogVisible = true;
    },
    shangchuanFn (e) {
      let dir;
      if (this.urlpath.length == 0) {
        dir = "/";
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      // var file = this.files[0];
      let file = e.target.files[0];
      this.$https.get("/common/getpolicy", { params: { dir } }).then((res) => {
        res = res.data;
        let param = new FormData(); // 创建form对象
        param.append("OSSAccessKeyId", res.OSSAccessKeyId);
        param.append("policy", res.policy);
        param.append("key", res.startsWith + file.name);
        param.append("success_action_status", 200);
        param.append("signature", res.signature);
        param.append("file", file, file.name);
        this.progress = true;
        this.xhr.open("post", "https://" + res.host, true);
        this.xhr.upload.addEventListener(
          "progress",
          this.progressFunction,
          false
        ); //调用方法监听上传进度
        this.xhr.onload = () => {
          this.$https
            .post("/common/examine", {
              name: this.name,
              path: dir,
              file_name: file.name,
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "上传完成,等待审核",
              });
              this.progress = false;
              this.percentage = 0;
              this.getwjlist(dir);
            });
        };
        this.xhr.send(param);
      });
    },
    progressFunction (event) {
      if (event.lengthComputable) {
        var percent = Math.floor((event.loaded / event.total) * 100);
        if (percent > 100) {
          percent = 100;
        }
        this.percentage = percent;
      }
    },
    refUpload () {
      //关闭上传事件
      this.xhr.abort();
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  margin-left: 20px;
}
.test {
  position: relative;
  display: inline-block;
  background: #4d97ff;
  // border: 1px solid #99d3f5;
  border-radius: 1px;
  padding: 5px 12px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  margin-right: 20px;
}
.test input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.test:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.top {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #e2e2e2;
  background-color: #fff;
  position: fixed;
  .optin {
    display: flex;
    align-items: center;
  }
}
.box {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  min-height: 70vh;
  padding-top: 10px;
  .item {
    margin: 20px;
    padding: 20px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    font-size: 14px;
    cursor: pointer;
    .img {
      position: relative;
      img {
        width: 90px;
        height: 90px;
      }
      span {
        position: absolute;
        left: 5px;
        top: 40px;
      }
    }

    &:hover {
      background-color: rgba(179, 179, 179, 0.333);
    }
  }
  .item1 {
    .img {
      img {
        opacity: 0.4;
        filter: alpha(opacity=60);
      }
      span {
        color: rgb(190, 64, 64);
      }
    }
    &:hover {
      background-color: rgba(255, 0, 0, 0.333);
      cursor: no-drop;
      cursor: not-allowed;
    }
  }
}
.options {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100px;
  background-color: #fff;
  box-shadow: 0 0 5px #cecece;
  border-radius: 10px;
  padding: 10px 0;
  div {
    padding: 10px;
    cursor: pointer;
    .mg {
      margin-right: 15px;
    }
    &:hover {
      background-color: #4d97ff;
      color: #fff;
    }
  }
}
.progress {
  margin-top: 10px;
  width: 300px;
}
.info {
  div {
    padding: 10px 0;
    color: #000;
    span {
      display: inline-block;

      font-weight: bold;
    }
    :nth-child(1) {
      margin-right: 10px;
    }
  }
}
</style>
